<template>
	<el-dialog class="dialog-card"
		v-model="visible"
		width="80%"
		draggable
		:close-on-click-modal="false"
		style="font-size: large;height: 700px"
	>
      <template #title>
        <span>
          <span><i class="iconfont icon-lishijilu mr-2 color2"></i>{{t('agv.operationLog')}}</span>

        </span>
      </template>
      <el-table
        :data="tableList"
        border
        style="width: 100%; height: 100%"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center',
        background: 'var(--el-table-row-hover-bg-color)',
        color:'var(--el-text-color-primary)'}"
      >
        <el-table-column :label="$t('agv.serialNumber')" width="80" prop="id" fixed> </el-table-column>
        <el-table-column :label="$t('agv.type')" prop="type" width="120"> </el-table-column>
        <el-table-column :label="$t('agv.creator')" prop="createUserName" width="120"> </el-table-column>
        <el-table-column :label="$t('agv.creationTime')" prop="createTime" width="160" fixed> </el-table-column>
        <el-table-column :label="$t('agv.ourSystem')" prop="taskCode" width="140"> </el-table-column>
        <el-table-column :label="$t('agv.rcsSystem')" prop="robotTaskCode" width="200">
        </el-table-column>
        <el-table-column :label="$t('agv.taskType')" prop="taskBusinessType" width="280">
        </el-table-column>
        <el-table-column :label="$t('agv.previousStartLine')" prop="firstStartLineCode" width="180">
        </el-table-column>
        <el-table-column :label="$t('agv.previousStartPoint')" prop="firstEndLocationCode" width="180">
        </el-table-column>
        <el-table-column :label="$t('agv.previousEndLine')" prop="firstEndLineCode" width="180">
        </el-table-column>
        <el-table-column :label="$t('agv.previousEndPoint')" prop="firstStartLocationCode" width="180">
        </el-table-column>
        <el-table-column :label="$t('agv.operationType')" prop="operation" width="140">
        </el-table-column>

      </el-table>

		<template #footer>
			<div class="dialog-footer">
				<el-button type="info" @click="handleCancelClick" size="large"><i class="iconfont icon-huigun mr-2"></i>{{ $t('agv.close') }}</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
import '@/style/tailwind.css'
import '@/assets/font/iconfont.css'
import { ref,defineExpose } from 'vue'
import { getTaskLogByTaskCode } from '@/api/mes/agv';
import useI18n from '@/hooks/language'
const { t } = useI18n();

// 定义变量内容
const visible = ref(false);
const tableList = ref([]); //表格数据

// 关闭弹框
const handleCancelClick = () => {
	tableList.value = [];
	visible.value = false;
};
// 打开弹框
const openLogDialog = (index) => {
	visible.value = true;
  const lang = localStorage.getItem('lang')
	getTaskLogByTaskCode({ taskCode: index.taskCode, lang }).then((res) => {
		tableList.value = res.result;
		tableList.value.map((item, index) => {
			item.id = index + 1;
		});
	});
};
// 暴露变量
defineExpose({
	openLogDialog,
});
</script>
<style scoped lang="scss">

</style>
